<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>菜单分配</title>

	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/sa.js"></script>

	<style>
		body, .el-tree {
			background-color: #F5F5F5;
		}

		.el-tree-node {
			margin: 0.15em 0 !important;
		}

		/* 悬浮时颜色更深一点 */
		.el-tree-node__content:hover {
			background-color: #CFE8FC !important;
		}

	</style>

</head>
<body>


<div class="vue-box">

	<!-- 表格 -->
	<div style="padding: 2em;">
		<div class="c-title">所有权限</div>
		<!-- 此扩展能递归渲染一个权限树，点击深层次节点，父级节点中没有被选中的节点会被自动选中，单独点击父节点，子节点会全部 选中/去选中 -->
		<el-tree
				:check-on-click-node="true"
				:check-strictly="true"
				:data="dataList"
				:default-checked-keys="select_list"
				:default-expand-all="true"
				:expand-on-click-node="false"
				@check="node_click"
				@node-click="node_click"
				node-key="id"
				ref="tree"
				show-checkbox
		>
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span style="color: #2D8CF0;" v-if="data.is_show == undefined || data.is_show == true">{{ data.name }}</span>
						<span style="color: #999;" v-if="data.is_show == false">{{ data.name }} (隐藏)</span>
						<span style="color: #999;" v-if="data.info">&emsp;———— {{data.info}} </span>
					</span>
		</el-tree>

		<!--
			default-expand-all  展开所有
			default-checked-keys  默认选中
		 -->

		<br>
		<div class="c-item">
			<el-button @click="ok" icon="el-icon-search" size="mini" type="primary">确定</el-button>
		</div>


	</div>


</div>

<script src="../../sa-resources/admin-util.js"></script>

<script>

    var role_id = sa.$util.getUrlArgs('role_id');

    var app = new Vue({
        el: '.vue-box',
        data: {
            dataList: [],	// 数据集合
            select_list: [],	// 默认选中
        },
        methods: {
            // 保存
            ok: function () {
                var str = [];
                this.$refs.tree.getCheckedKeys().forEach(function (ts) {
                    str.push(ts)
                });
                let data = {
                    roleid: role_id,
                    resids: str
                };
                sa.put("/role/updateresource", JSON.stringify(data), function (res) {
                    layer.alert('成功', {}, function () {
                        if (parent != window) {
                            parent.layer.closeAll('iframe');
                        }
                        layer.closeAll();
                    });
                })
            },
            // 点击回调, 处理其子节点跟随父节点的选中
            node_click: function (node) {
                var is_select = this.$refs.tree.getCheckedKeys().indexOf(node.id) != -1;	// 此节点现在是否被选中
                if (node.children) {
                    node.children.forEach(function (item) {
                        this.$refs.tree.setChecked(item.id, is_select);
                        // 递归
                        if (item.children) {
                            this.node_click(item);
                        }
                    }.bind(this))
                }
            }
        },
        created: function () {
            let that = this;
            //当前有权限的节点
            sa.get('/resource/byrole/' + role_id, null, function (res) {
                if (res && res.state) {
                    let data = res.data;
                    for (let i = 0; i < data.length; i++) {
                        that.select_list.push(data[i].id);
                    }
                    console.log(that.select_list);
                    // 全部
                    sa.get('/resource', null, function (arg) {
                        if (!arg || !arg.state) {
                            return;
                        } else {
                            arg = arg.data;
                        }
                        parseDataTooTree(arg);
                        that.dataList = arg;	// 数据
                    });
                }
            });


        }
    });
    let parseDataTooTree = function (arg) {
        for (let i = 0; i < arg.length; i++) {
            arg[i].icon = 'el-icon-document-remove';
            arg[i].label = arg[i].name;
            if (arg[i].childList && arg[i].childList == 0) {
                delete arg[i].childList;
                continue;
            }
            if (arg[i].childList) {
                parseDataTooTree(arg[i].childList);
                arg[i].children = arg[i].childList;
            }
        }
    };


</script>

</body>
</html>